<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="b">
    <div class="row" style="margin-top: 5px">
        <!--轮播图、最近发布和热门商品-->
        <div class="col-md-9">
            <!-- Carousel -->
            <div id="demo" class="carousel slide" data-ride="carousel">

                <!-- 指示符 -->
                <ul class="carousel-indicators">
                    <li data-target="#demo" th:each="carousel:${carouselList}" th:data-slide-to="${carouselStat.index}"
                        th:class="${carouselStat.index==0?'active':''}"></li>
                </ul>

                <!-- 轮播图片 -->
                <div class="carousel-inner">
                    <div th:each="carousel:${carouselList}"
                         th:class="${carouselStat.index==0?'carousel-item active':'carousel-item'}">
                        <a th:href="${carousel.url==null?'#':carousel.url}"><img
                                th:src="${'/static/images/carouselImage/'+carousel.imageName}"></a>
                        <div class="carousel-caption">
                            <h3 th:text="${carousel.title}"></h3>
                            <p th:text="${carousel.content}"></p>
                        </div>
                    </div>
                </div>

                <!-- 左右切换按钮 -->
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>

            </div>
            <!--最近发布-->
            <div>
                <div class="card" style="margin-top: 5px">
                    <div class="card-header bg-primary text-white"><i class="fa fa-dropbox"></i>最近发布
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="card col-md-4" th:each="goodsNew:${goodsNewList}">
                                <a th:href="${'/goods/'+goodsNew.id}"><img class="card-img-top"
                                                                           th:src="@{'/static/images/articleImage/'+${goodsNew.imageName}+'.jpg'}"
                                                                           alt="Card image"
                                                                           style="width:100%"></a>
                                <div class="card-body">
                                    <a th:href="${'/goods/'+goodsNew.id}" class="status-icon hint--top"
                                       th:aria-label="${goodsNew.name}"><h6
                                            class="card-title" th:text="${#strings.abbreviate(goodsNew.name,15)}"></h6>
                                    </a>
                                    <p class="card-text">￥<span th:text="${goodsNew.priceNow}"></span>&nbsp;&nbsp;&nbsp;&nbsp;<del
                                            th:if="${goodsNew.priceLast!=0&&goodsNew.priceLast>goodsNew.priceNow}"
                                            style="color: darkred">￥
                                    </del>
                                        <del
                                                th:text="${goodsNew.priceLast}"
                                                th:if="${goodsNew.priceLast!=0&&goodsNew.priceLast>goodsNew.priceNow}"
                                                style="color: darkred"></del>
                                    </p>
                                    <a th:href="${'/goods/'+goodsNew.id}" class="btn btn-primary btn-sm">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--热门商品-->
            <div>
                <div class="card" style="margin-top: 5px">
                    <div class="card-header bg-primary text-white"><i class="fa fa-fire"></i>热门商品
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="card col-md-4" th:each="goodsHot:${goodsHotList}">
                                <a th:href="${'/goods/'+goodsHot.id}"><img class="card-img-top"
                                                                           th:src="@{'/static/images/articleImage/'+${goodsHot.imageName}+'.jpg'}"
                                                                           alt="Card image"
                                                                           style="width:100%"></a>
                                <div class="card-body">
                                    <a th:href="${'/goods/'+goodsHot.id}" class="status-icon hint--top"
                                       th:aria-label="${goodsHot.name}"><h6
                                            class="card-title" th:text="${#strings.abbreviate(goodsHot.name,15)}"></h6>
                                    </a>
                                    <p class="card-text">￥<span th:text="${goodsHot.priceNow}"></span>&nbsp;&nbsp;&nbsp;&nbsp;<del
                                            th:if="${goodsHot.priceLast!=0&&goodsHot.priceLast>goodsHot.priceNow}"
                                            style="color: darkred">￥
                                    </del>
                                        <del style="color: darkred"
                                             th:text="${goodsHot.priceLast}"
                                             th:if="${goodsHot.priceLast!=0&&goodsHot.priceLast>goodsHot.priceNow}"></del>
                                    </p>
                                    <a th:href="${'/goods/'+goodsHot.id}" class="btn btn-primary btn-sm">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--公告和推荐商品-->
        <div class="col-md-3">
            <div class="card">
                <div class="card-header bg-primary text-white"><i class="fa fa-google-wallet"></i>公告</div>
                <div class="card-body">
                    <div>
                        <p th:each="announcement:${announcementList}"><a th:href="${'/announcement/'+announcement.id}"
                                                                         th:text="${announcement.title}"
                                                                         class="status-icon hint--top"
                                                                         th:aria-label="${announcement.title}"></a></p>
                    </div>
                </div>
            </div>
            <div class="card" style="margin-top: 8px" th:if="${goodsRecommendList.size()>0}">
                <div class="card-header bg-primary text-white"><i class="fa fa-houzz"></i>推荐商品</div>
                <div class="card-body">
                    <div>
                        <div class="row" th:each="goodsRecommend:${goodsRecommendList}">
                            <div class="col-md-4">
                                <a th:href="${'/goods/'+goodsRecommend.id}"><img
                                        th:src="@{'/static/images/articleImage/'+${goodsRecommend.imageName}+'.jpg'}"
                                        alt=""
                                        style="width: 88px;height: 60px"></a>
                            </div>
                            <div class="col-md-8">
                                <div>
                                    <a th:href="${'/goods/'+goodsRecommend.id}" class="status-icon hint--top"
                                       th:aria-label="${goodsRecommend.name}"><span
                                            th:text="${#strings.abbreviate(goodsRecommend.name,20)}"></span></a>
                                    <p style="color: #b52b27">￥<span th:text="${goodsRecommend.priceNow}"></span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>